<template>
	<transition name="slide-up">
		<div class="menu-wrapper"  v-show="menuVisble">
			<div class="icon-wrapper">
				<div @click="showSetting(3)" class="icon-menu"></div>
			</div>
			<div class="icon-wrapper">
				<div @click="showSetting('')" class="icon-progress"></div>
			</div>
			<div class="icon-wrapper">
				<div @click="showSetting('')" class="icon-bright"></div>
			</div>
			<div class="icon-wrapper">
				<div @click="showSetting(0)" class="icon-A"></div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { ebookMixin } from '../../utils/mixin.js'
	export default {
		name: 'ebookMenu',
		mixins: [ebookMixin],
		data() {
			return {
				
			}
		},
		computed:{
			
		},
		methods: {
			/**
			 * 点击显示设置栏
			 * @param {Object} key 点击的设置 关键字
			 */
			showSetting(key) {
				if(key === 3) {
					this.hideTitleAndMenu()
				}
				this.setsettingVisible({
					settingVisible: key
				})
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	.menu-wrapper {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 102;
		display: flex;
		width: 100%;
		height: pxTorem(48);
		background: #fff;
		font-size: pxTorem(20);
		&.hidle-box-shadow {
			box-shadow: none;
		}
		.icon-wrapper {
			flex: 1;
			@include  flexCenter;
			.icon-progress {
				font-size: pxTorem(24);
			}
			.icon-bright {
				font-size: pxTorem(22);
			}
		}
	}

</style>
